<template>
	<div>
		<div class="top">
			<el-button type="primary" @click="dialogVisible = true">添加</el-button>
			<el-input placeholder="请输入检索内容">
				<template slot="append">
					<el-button @click='search'>搜索</el-button>
				</template>
			</el-input>
		</div>
		<!-- 表格 -->
		<el-table :data="classifyList" style="width: 100%" height="520" >
			<el-table-column prop="id" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="classifyName" label="类名">
				<template v-slot="scope">
					<el-tag>{{scope.row.classifyName}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="" label="操作" width="180">
				<template slot-scope='scope'>
					<el-button type="primary" icon="el-icon-edit" @click="showEdit(scope.row)"></el-button>
					<template>
						<el-popconfirm title="确定永久删除？" @confirm="del(scope.row.id)">
							<el-button type="primary" icon="el-icon-delete" slot="reference"></el-button>
						</el-popconfirm>
					</template>
					<!-- <el-button type="primary" icon="el-icon-delete" @click="del(scope.row.id)"></el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<!-- current-page当前页数  -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
			:page-sizes="page.sizes" :page-size="page.rows" layout="total, sizes, prev, pager, next, jumper"
			:total="page.totle">
		</el-pagination>
		<!-- 修改分类 -->
		<el-dialog title="修改分类" :visible.sync="editorVisible" width="30%">
			<el-form label-width="80px" :model="addClassify">
				<el-form-item label="分类">
					<el-input v-model="addClassify.classifyName" placeholder="请输入类名"></el-input>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editorVisible = false">取 消</el-button>
				<el-button type="primary" @click="editor">提 交</el-button>
			</span>
		</el-dialog>
		<!-- 添加 -->
		<el-dialog title="添加分类" :visible.sync="dialogVisible" width="30%">
			<el-form label-width="80px" :model="addClassify">
				<el-form-item label="分类">
					<el-input v-model="addClassify.classifyName" placeholder="请输入类名"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="add">添 加</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	var _this = this;
	export default {
		name: '',
		data() {
			return {
				// 分页
				page: {
					currentPage: 1,
					totle: 0,
					sizes: [4, 5, 6, 7, 14],
					rows: 7,
					page: 1
				},
				// 修改
				editorVisible: false,
				// 添加
				dialogVisible:false,
				classifyList: [],
				addClassify: {
					classifyName: "",
				},
				editId: '',
			}
		},
		created() {
			_this = this;
			this.getClassifyList()
		},
		mounted() {

		},
		methods: {
			// 分页
			handleSizeChange(val) {
				// 通过改变页面 每页显示几条 得到数据 重新渲染 
				console.log(`每页 ${val} 条`);
				// console.log(val)
				_this.page.rows = val
				_this.getClassifyList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				_this.page.page = val
				_this.getClassifyList()
			},
			search() {
				console.log('classify搜索')
			},
			// 获取分类列表
			getClassifyList() {
				// sessionStorage 得到session里面的值
				// console.log(sessionStorage.getItem("member"))
				// console.log(JSON.parse(sessionStorage.getItem("member")))
				let _this = this;
				_this.$axios({
					// url: "/api/v1/classifyList?pageSize=5&pageNum=1",
					url:`/api/v1/classifyList?pageSize=${_this.page.rows}&pageNum=${_this.page.page}`,
					headers: {
						// JSON.parse json字符串转换为对象
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: 'GET',
					// params:{
					// 	pageSize:1,
					// 	pageNum:1,
					// }
				}).then(function(res) {
					console.log(res)
					console.log(res.data.data.count)
					if (res.data.code == 200) {
						_this.classifyList = res.data.data.classifyList
						// console.log(_this.memberList)
						// 获取列表总数
						_this.page.totle = res.data.data.count
					} else {
						_this.memberList = []
					}
				})
			},
			// 删除  info: "ID 不能为空"
			del(id) {
				console.log(id)
				_this.$axios({
					url: "/api/v1/classifyDel",
					// url: `/api/v1/classifyDel?id=${id}`,
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token,
					},
					method: "POST",
					data: {
						id: id,
					}
				}).then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.$message({
							message: "删除成功",
							type: "success",
							duration: 800,
							onClose: function() {
								_this.getClassifyList()
							}
						})
					} else {
						_this.$message({
							message: "删除失败",
							type: 'error',
							duration: 800,
						})
					}
				})
			},
			// 展示修改弹窗
			showEdit(obj) {
				this.editorVisible = true
				console.log(obj)
				this.editId = obj.id
				this.addClassify.classifyName = obj.classifyName
			},
			// 修改
			editor() {
				console.log("classify修改")
				if (_this.addClassify.classifyName == "") {
					_this.$message({
						message: '请输入内容',
						type: "error",
						duration: 800,
					})
					return;
				}
				_this.$axios({
					url: "/api/v1/classifyUpdate",
					method: "POST",
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					data: {
						"id": _this.editId,
						"classifyName": _this.addClassify.classifyName
					}
				}).then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.$message({
							message: "修改成功",
							type: 'success',
							duration: 800,
							onClose: function() {
								_this.addClassify.classifyName = ""
								_this.getClassifyList()
								_this.editorVisible = false
							}
						})
					} else {
						_this.$message({
							message: "修改失败",
							type: "error",
							duration: 800,
							onClose: function() {
								_this.addClassify.classifyName = ""
							}
						})
					}
				})
			},
			// 添加
			add(){
				// console.log("addclassify")
				if(_this.addClassify.classifyName==""){
					_this.$message({
						message:"添加成功",
						type:"success",
						duration:800
					})
					return;
				}
				_this.$axios({
					url:"/api/v1/classifyAdd",
					headers:{
						token:JSON.parse(sessionStorage.getItem("member")).token
					},
					method:"POST",
					data:{
						"classifyName":_this.addClassify.classifyName
					}
				}).then(function(res){
					// console.log(res)
					if(res.data.code==200){
						_this.$message({
							message:'添加成功',
							type:'success',
							duration:800,
							onClose:function(){
								_this.addClassify.classifyName="";
								_this.dialogVisible = false;
								_this.getClassifyList();
							}
						})
					}else{
						_this.$message({
							message:"res.data.info",
							type:"error",
							duration:800,
							onClose:function(){
								_this.addClassify.classifyName=""
							}
						})
					}
				})
			}
		}
	}
	// {
	// 	a:123
	// }
	// "{
	// 	"a":"123"
	// }"
</script>

<style scoped="scoped">
	.top {
		display: flex;
		background: #fff;
		padding: 10px 10px;
		box-sizing: border-box;
		/* border-bottom: 1px solid #ddd; */
		/* background-color: #f8f8f9; */

	}

	.top .el-input {
		width: 250px;
		margin: 0 20px;
		/* background-color: #f8f8f9; */
	}
	.el-pagination {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

</style>

<style>

	.el-popover__reference-wrapper {
		margin-left: 10px;
	}
</style>
